//固定栏效果
var rights = document.querySelector('.fixed').children;
var fixop = rights[0];
var poption = rights[1];
var fixlis = fixop.children[0].children;
var poptionlis = poption.children;
for (let i = 0; i < fixlis.length - 1; i++) {
   fixlis[i].index = i;
   fixlis[i].addEventListener('mouseover', function () {
      poption.className = "poption";
      for (let j = 0; j < poptionlis.length; j++) {
         fixlis[j].className = "";
         poptionlis[j].style.display = "none";
      }
      poptionlis[this.index].style.top += 60 * i + 'px';
      poptionlis[this.index].style.display = 'block';
   })
}
fixop.addEventListener('mouseout', function () {
   poption.className = 'poption hide'
})
poption.addEventListener('mouseout', function () {
   poption.className = 'poption hide'
})
//回到顶部效果
$(fixlis[4]).on('click', function () {
   $('body,html').animate({
      scrollTop: 0,
   }, 300)
});
/******************商品效果图***************************/
let index = 0;//保存当前显示图片的序号
let timer;//保存定时器标识
const imgs = document.querySelectorAll('.right-img img');
timer = setInterval(autoPlay, 1800);
function autoPlay() {
   // 找到当前要来显示的图片地址
   index++;
   // 如果加到4表示已经显示到了最后一张图片，需要重置到第一张图片
   if (index == imgs.length) {
      index = 0;
   }
   changeImg();
}
function changeImg() {
   document.querySelector('.left-img img').src = imgs[index].src;
   // 处理小图的透明度
   for (let i = 0; i < imgs.length; i++) {
      let op = (i == index) ? 1 : 0.5
      imgs[i].style.opacity = op;
   }
}
for (let i = 0; i < imgs.length; i++) {
   imgs[i].onmouseenter = function () {
      clearInterval(timer);
      // 设置当前的图片显示  i代表当前划入的图片的序号
      // 当划入到当前图片 设置index变量保存当前的图片序号
      index = i;
      changeImg();
   }
   imgs[i].onmouseleave = function () {
      timer = setInterval(autoPlay, 1800);
   }
}
/*******************地址栏详情*************************/
$(function () {
   $.ajax({
      type: 'get',
      url: baseUrl + '/system/province',
      data: { parentId: 1 },
      dataType: 'json',
      success: function (res) {
         console.log(res);
         let html = '';
         res.data.forEach((item) => {
            html += `<option value="${item.id}">${item.name}</option>`
         });
         $('.details-cont #address #province').html(html);
      }
   }).then(() => {
      $('.details-cont #address #province').on('change', function () {
         $.ajax({
            type: 'get',
            url: baseUrl + '/system/province',
            data: { parentId: $(this).val() },
            dataType: 'json',
            success: function (res) {
               console.log(res);
               let html = '';
               res.data.forEach((item) => {
                  html += `<option value="${item.id}">${item.name}</option>`
               });
               $('.details-cont #address #city').html(html);
            }
         }).then(() => {
            $('.details-cont #address #city').on('change', function () {
               $.ajax({
                  type: 'get',
                  url: baseUrl + '/system/province',
                  data: { parentId: $(this).val() },
                  dataType: 'json',
                  success: function (res) {
                     let html = '';
                     res.data.forEach((item) => { html += `<option value="${item.id}">${item.name}</option>` });
                     $('.details-cont #address #area').html(html);
                  }
               }).then(() => {
                  $('.details-cont #address #area').on('change', function () {
                     $.ajax({
                        type: 'get',
                        url: baseUrl + '/system/province',
                        data: { parentId: $(this).val() },
                        dataType: 'json',
                        success: function (res) {
                           let html = '';
                           res.data.forEach((item) => { html += `<option value="${item.id}">${item.name}</option>` });
                           $('.details-cont #address #town').html(html);
                        }
                     })
                  })
               })
            })
         })
      })
   });
})
/********************保存地址信息到数据库***************************/
$(function(){
   
})
/**********************tab栏切换******************************/
$('.introduce .tab>li').on('click', function () {
   $(this).addClass('active').siblings().removeClass('active');
   var index = $(this).index();
   $('.products .main').eq(index).addClass('selected').siblings().removeClass('selected');
})
/************************购物数量加减******************************/

$('#number button').eq(0).click(function () {
   if ($('#number button').eq(0).next().val() > 1) {
      $('#number button').eq(0).next().val($('#number button').eq(0).next().val() - 1);
   }
})
$('#number button').eq(1).click(function () {
   if ($('#number button').eq(1).prev().val() < 99) {
      $('#number button').eq(1).prev().val($('#number button').eq(1).prev().val() - 0 + 1);
   }
})
/***************************商品详情信息**********************************/
$(function () {
   let goodsId = getParam('goodsId');
   console.log(goodsId);
   // 获取商品详情
   $.get(baseUrl + '/goods/detail', { goodsId }, (res) => {
      // console.log(res);
      let goods = res.data;
      // 替换标题
      $('.details-cont').children().eq(0).html(goods.goodsName);
      // 替换编号
      $('.details-cont').children().eq(1).html('商品编号：' + goods.goodsSn);
      // 替换价格
      $('.details-cont').children().eq(3).children().eq(1).children().eq(0).html(goods.shopPrice);
      $('.details-cont').children().eq(3).children().eq(1).children().eq(1).html(goods.marketPrice);
   }, 'json');
   /***************************加入购物车逻辑********************************/
   // console.log($('.add_btn'));
   $('.add_btn').on('click', () => {
      // 获取商品数量
      let goodsCount = $('.amount').val();
      if (userInfo) {
         // 用户已经登录，直接调用服务端接口将信息加入购物车
         $.post(baseUrl + '/cart/add', { userId: userInfo.id, goodsId, goodsCount }, (res) => {
            console.log(res);
            if (res.code != 0) {
               alert(res.msg);
               return;
            }
         }, 'json');
      } else {
         // 用户没有登录
         // 由于每次加入商品到购物车都需要判断是否已经添加。所以先需要从localstorage中获取到数据，然后进行比较。比较完成之后。最后将数据再次写入到localstorage中
         //  userCart不论是什么时候添加永远格式为一个对象。这个变量中记录了目前用户已经将那些商品加入到了购物车
         let userCart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : {};
         console.log(userCart);
         if (userCart[goodsId]) {
            // 目前要添加的商品已经被添加到了购物车中。以第二次加入的数量为准
            userCart[goodsId] = goodsCount;
         } else {
            // 目前要添加的商品没有被添加到购物车。所以需要添加元素进行记录
            userCart[goodsId] = goodsCount;
         }
         // 需要将userCart变量中的数据保存到localstorage中存储
         localStorage.setItem('cart', JSON.stringify(userCart));
      }
      location.href = 'cart.html';
      return false;
   });
})
